<!DOCTYPE html>
<!--[if IE 8]>
<html lang="en" class="ie8 no-js" ng-app="DBApp"> <![endif]-->
<!--[if IE 9]>
<html lang="en" class="ie9 no-js" ng-app="DBApp"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en" ng-app="DBApp">
<!--<![endif]-->
<head>
    <meta charset="UTF-8">
    <title>magic-table</title>
    <link href="./css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <link href="./css/simple-line-icons.min.css" rel="stylesheet" type="text/css"/>
    <link href="./css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="./css/bootstrap-switch.min.css" rel="stylesheet" type="text/css"/>
    <!-- END GLOBAL MANDATORY STYLES -->
    <!-- BEGIN DYMANICLY LOADED CSS FILES(all plugin and page related styles must be loaded between GLOBAL and THEME css files ) -->
    <link id="ng_load_plugins_before"/>
    <!-- END DYMANICLY LOADED CSS FILES -->
    <!-- BEGIN THEME STYLES -->
    <!-- DOC: To use 'rounded corners' style just load 'components-rounded.css' stylesheet instead of 'components.css' in the below style tag -->
    <link href="./css/components-rounded.min.css" id="style_components" rel="stylesheet" type="text/css"/>
    <link href="./css/plugins.min.css" rel="stylesheet" type="text/css"/>
    <link href="./css/layout.min.css" rel="stylesheet" type="text/css"/>
    <link href="./css/light.min.css" rel="stylesheet" type="text/css" id="style_color"/>
    <link href="./css/custom.min.css" rel="stylesheet" type="text/css"/>
    <link src="./css/toaster.min.css" rel="stylesheet">
</head>
<body ng-controller="myCtrl">
<div class="container-fluid">
    <div class="row" style="width: 100%;">
        <div style="text-align: center;">
            <!-- BEGIN EXAMPLE TABLE PORTLET-->
            <div class="portlet box red">
                <div class="portlet-title">
                    <div class="caption">
                        <i class="fa fa-cogs"></i>Table
                    </div>
                </div>
                <div class="portlet-body">
                    <div class="row">
                        <div class="col-lg-1">

                        </div>
                        <div class="col-lg-10" style="text-align: center;">
                            <div id="sample_3_wrapper" class="dataTables_wrapper no-footer table-scrollable">
                                <div style="width: {{tablePx.tableWidth + 'px'}}">
                                    <table class="table table-striped table-bordered table-hover table-checkable">
                                        <thead>
                                        <tr role="row">
                                            <th style="width: {{tablePx.tableFirstWidth + 'px'}};">票面金额</th>
                                            <th class="table-col-first-title" style="width: {{tablePx.tableTypeNameWidth + 'px'}};">
                                                <span>票据类别</span>
                                                <span style="margin-left: 30%;">票据期限</span>
                                            </th>
                                            <th style="width: {{tablePx.tablePeriodWidth + 'px'}}; text-align: center;" ng-repeat="titleItem in tableParams.titlePeriod">
                                                <div style="display: inline;"><a style="margin-right: 10px; text-decoration: none; color: blue;" href="javascript:void(0)" ng-click="insideColDel($index)">-</a></div>
                                                <div style="display: inline;">
                                                    <div style="display: inline">
                                                        <input type="radio" name="time+{{$index}}" ng-model="titleItem.period" ng-value="1">
                                                        <label>不足月</label>
                                                    </div>
                                                    <div style="display: inline">
                                                        <input type="radio" name="time+{{$index}}" ng-model="titleItem.period" ng-value="2">
                                                        <label>足月</label>
                                                    </div>
                                                    <div style="display: inline">
                                                        <input type="radio" name="time+{{$index}}" ng-model="titleItem.period" ng-value="3">
                                                        <label>不足年</label>
                                                    </div>
                                                    <div style="display: inline">
                                                        <input type="radio" name="time+{{$index}}" ng-model="titleItem.period" ng-value="4">
                                                        <label>足年</label>
                                                    </div>
                                                </div>
                                                <div style="display: inline;"><a style="margin-left: 5px; text-decoration: none; color: red;" href="javascript:void(0)" ng-click="insideColAdd($index)">+</a></div>
                                            </th>
                                        </tr>
                                        </thead>
                                        <tbody ng-repeat="items in tableParams.tableData">
                                        <tr class="gradeX odd" role="row" ng-repeat="tableData in items">
                                            <td class="first-col-span" rowspan="{{items.length}}" ng-if="!!tableData.firstColData && $index == '0'">
                                                <div class="row" style="margin-top: 30%;">
                                                    <a style="text-decoration: none; color: blue;" href="javascript:void(0)" ng-click="outRowDel($parent.$parent.$index)">-</a>
                                                </div>
                                                <div class="row first-row-span" style="margin-top: 20%;">
                                                    <div class="form-group">
                                                        <div class="col-lg-4 control-label" style="margin-left: 2px;padding-right: 0px;">
                                                            <input class="form-control" ng-model="tableData.firstColData.startAmount" placeholder="起始金额">
                                                        </div>
                                                        <label class="col-md-1 control-label" style="padding-left: 0px; padding-right: 0px; line-height: 35px;">~</label>
                                                        <div class="col-lg-4 control-label" style="padding-left: 0px; padding-right: 0px;">
                                                            <input class="form-control" ng-model="tableData.firstColData.endAmount" placeholder="结束金额">
                                                        </div>
                                                        <label class="col-md-2 control-label" style="padding-left: 0px; padding-right: 0px; line-height: 35px;">万元</label>
                                                    </div>
                                                </div>
                                                <div class="row" style="margin-top: 20%;">
                                                    <a style="text-decoration: none; color: red;" href="javascript:void(0)" ng-click="outRowAdd($parent.$parent.$index)">+</a>
                                                </div>
                                            </td>
                                            <td style="text-align: center;">
                                                <div style="display: inline;"><a style="margin-right: 2px; text-decoration: none; color: blue;" href="javascript:void(0)" ng-click="insideRowDel($parent.$index, $index)">-</a></div>
                                                <label style="display: inline;">{{tableData.typeName}}</label>
                                                <div style="display: inline;"><a style="margin-left: 2px; text-decoration: none; color: red;" href="javascript:void(0)" ng-click="insideRowAdd($parent.$index, $index)">+</a></div>
                                            </td>
                                            <td ng-repeat="period in tableData.period">
                                                <div class="row">
                                                    <div class="col-md-3" style="padding-right: 0px;">
                                                        <div class="input-group" style="padding: 0 0 0 0;">
                                                            <input type="text" ng-model="period.rateY" class="form-control" placeholder="年利率">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3" style="padding-right: 0px; padding-left: 0px;">
                                                        <div class="input-group" style="padding: 0 0 0 0;">
                                                            <input type="text" ng-model="period.feeRateM" class="form-control" placeholder="每月扣费率">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3" style="padding-right: 0px; padding-left: 0px;">
                                                        <div class="input-group" style="padding: 0 0 0 0;">
                                                            <input type="text" ng-model="period.buyAmount" class="form-control" placeholder="购买总金额">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <div class="input-group" style="padding: 0 0 0 0; line-height: 30px;">
                                                            <label style="margin-right: 4px;">万元</label>
                                                            <a style="margin-left: 4px; color: red;" href="javascript:void(0)">备注</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-1">

                        </div>
                    </div>
                </div>
                <div class="modal-footer" style="background-color: beige">
                    <div class="row">
                        <div class="col-md-4">
                            <button class="btn btn-danger" ng-click="deleteData()">删除报价</button>
                            <button class="btn btn-warning" ng-click="resetTable()">重置</button>
                            <button class="btn btn-primary" ng-click="submitTableData()">确定</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END EXAMPLE TABLE PORTLET-->
        </div>
    </div>
</div>
<script src="./js/jquery.min.js" type="text/javascript"></script>
<script src="./js/jquery-migrate.min.js" type="text/javascript"></script>
<script src="./js/bootstrap.min.js" type="text/javascript"></script>
<script src="./js/bootstrap-hover-dropdown.min.js" type="text/javascript"></script>
<script src="./js/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="./js/jquery.blockui.min.js" type="text/javascript"></script>
<script src="./js/js.cookie.min.js" type="text/javascript"></script>
<script src="./js/bootstrap-switch.min.js" type="text/javascript"></script>
<!-- END CORE JQUERY PLUGINS -->
<!-- BEGIN CORE ANGULARJS PLUGINS -->
<script src="./js/angular.min.js" type="text/javascript"></script>
<script src="./js/angular-sanitize.min.js" type="text/javascript"></script>
<script src="./js/angular-touch.min.js" type="text/javascript"></script>
<script src="./js/angular-ui-router.min.js" type="text/javascript"></script>
<script src="./js/angular-animate.js" type="text/javascript"></script>
<script src="./js/ocLazyLoad.min.js" type="text/javascript"></script>
<script src="./js/ui-bootstrap-tpls-0.13.3.js" type="text/javascript"></script>
<script src="./js/db-services.js" type="text/javascript"></script>
<script src="./js/toaster.min.js"></script>
<!--<script src="./js/toaster.js" type="text/javascript"></script>-->
<!--<script src="./js/toaster.scss" type="text/scss"></script>-->
<!-- END CORE ANGULARJS PLUGINS -->
<!-- BEGIN APP LEVEL ANGULARJS SCRIPTS -->
<script src="./js/main.js" type="text/javascript"></script>
<script src="./js/directives.js" type="text/javascript"></script>
<!-- END APP LEVEL ANGULARJS SCRIPTS -->
<!-- BEGIN APP LEVEL JQUERY SCRIPTS -->
<script src="./js/app.min.js" type="text/javascript"></script>
<script src="./js/layout.min.js" type="text/javascript"></script>
<script src="./js/quick-sidebar.min.js" type="text/javascript"></script>
<script src="./js/quick-nav.min.js" type="text/javascript"></script>
<script src="js/metronic.js" charset="UTF-8"></script>
<script src="js/index.js" charset="UTF-8"></script>
</body>
</html>